<!-- 52.4 地址表单页 -->
<script setup lang="ts">
import { ref } from 'vue'
import {
  postMemberAddressAPI,
  getMemberAddressByIdAPI,
  putMemberAddressByIdAPI,
} from '@/services/address' // 54.5 | 56.1 | 57.2
import type { AddressParams } from '@/types/address.d.ts' // 54.6(待定)
import { onLoad } from '@dcloudio/uni-app'

// 52.5(待定) 表单数据
let value = ['天津市', '天津市', '和平区']
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: value.join(' '), // 省市区(前端展示)
  provinceCode: '120000', // 省份编码(后端参数)
  cityCode: '120100', // 城市编码(后端参数)
  countyCode: '120101', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

// 52.9 通过 props 接收数据
const query = defineProps<{
  id?: string
}>()
// 52.end 根据id(是否点的是'修改'), 动态设置导航栏的标题:
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })

// 54. 业务起因 ->新用户没有收货地址, 先完成新建地址, 新建成功返回地址管理页...
// 54.8 处理 ->所在地区

// 54.9 处理 ->否默认收货地址
// const isChecked = ref(false)
const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
  form.value.isDefault = ev.detail.value ? 1 : 0
  // isChecked.value = ev.detail.value // 方法一
}

// 58.1 定义表单规则
const rules: UniHelper.UniFormsRules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请填写手机号码' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  // fullLocation: {
  //   rules: [{ required: true, errorMessage: '请选择所在地区' }],
  // },
  address: {
    rules: [{ required: true, errorMessage: '请填写详细地址' }],
  },
}

// 58.2 获取表单组件实例, 用于调用表单方法
const formRef = ref<UniHelper.UniFormsInstance>()

// 54.7 提交表单
const onSubmit = async () => {
  // 58. 提交表单前, 进行表单验证...
  try {
    // 58.3 表单校验
    // 细节40: 这里给 validate 加上了后缀“?.”, 处理其 “未定义” 的TS检测...
    await formRef.value?.validate?.()

    // 57. 根据id, 决定点击[保存并使用]是调用哪个接口
    if (query.id) {
      // 57.3 修改收货地址的
      await putMemberAddressByIdAPI(query.id, form.value)
    } else {
      // 添加收货地址的
      // 54.end 调用提交表单接口
      await postMemberAddressAPI(form.value)
    }

    // 57.end 处理不同接口调用时, 显示的提示文字
    uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  } catch (error) {
    // 58.end 不通过验证的提示信息
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}

// 56.2 获取收货地址详情
const getMemberAddressIdData = async () => {
  // 细节38: 有 id 才调用接口, 这样才能解决传给接口函数时, 不会被TS检测出错误类型！！！
  if (query.id) {
    const res = await getMemberAddressByIdAPI(query.id)

    // 56.end 把数据合并到表单中
    // 细节39: 刚进入页面时, form是初始值, 不用管其他的啊==!
    Object.assign(form.value, res.result)
  }
}

// 56.3 页面加载
onLoad(() => {
  getMemberAddressIdData()
})
</script>

<template>
  <view class="content">
    <uni-forms ref="formRef" :model="form" :rules="rules">
      <!-- 52.6 表单内容 -->
      <uni-forms-item class="form-item" name="receiver">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="contact">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </uni-forms-item>
      <!-- (待定)name="fullLocation" -->
      <uni-forms-item class="form-item">
        <text class="label">所在地区</text>
        <picker class="picker" mode="region" value="">
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item class="form-item" name="address">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <!-- 方法一: [:checked="isChecked"] -->
        <!-- 方法二: [:checked="form.isDefault === 1"] -->
        <switch
          class="switch"
          color="#27ba9b"
          :checked="form.isDefault === 1"
          @change="onSwitchChange"
        />
      </view>
    </uni-forms>
  </view>
  <!-- 52.7 提交按钮 -->
  <button @tap="onSubmit" class="button">保存并使用</button>
</template>

<style lang="scss">
/* 52.8 样式 */
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    /* 调整 uni-forms 样式 */
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
